<!-- 页面引用审批人员demo-->
<template>
  <PageWrapper class="high-form" :title="getTitle">
    <CollapseContainer title="基础信息">
      <!-- 表单信息-->
      <BasicForm @register="registerForm" />
    </CollapseContainer>
    <CollapseContainer title="流程信息">
      <!-- 审批信息 -->
      <SelectApprover :flowData="serverData" @success="getFlowData" />
    </CollapseContainer>
    <template #rightFooter>
      <a-button type="primary" @click="handleSaveForm">保存</a-button>
    </template>
  </PageWrapper>
</template>

<script lang="ts">
import { onBeforeMount, provide, defineComponent, ref, computed, unref } from 'vue';

import { BasicForm, useForm } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page';
import { Button } from '/@/components/Button';

import SelectApprover from './SelectApprover.vue';
import { formSchema, } from './data';

export default defineComponent({
  components: { SelectApprover, BasicForm, CollapseContainer, PageWrapper, Button },
  setup() {
    //主表单
    const [registerForm, { validate }] = useForm({
      schemas: formSchema,
      labelWidth: 100,
      showActionButtonGroup: false,
    });

    const { createMessage } = useMessage();
    const isUpdate = ref(false);

    const getTitle = computed(() => (!unref(isUpdate) ? '新增xx信息' : '编辑xx信息'));
    //模拟后台传过来的人员信息
    const serverDataType: any = { showApprove: false, aaList: [], ccList: [] }
    const serverData = ref(serverDataType);
    const clientData = ref(serverDataType);

    function getServerData() {
      let data = { showApprove: false, aaList: [{ uid: 1, name: '审批boss' }], ccList: [{ uid: 2, name: '路人甲' }, { uid: 3, name: '路人乙' }] }
      return new Promise(resolve => {
        // 模拟1s后返回数据
        setTimeout(() => resolve(data), 1000);
      })
    }
    //异步处理
    function requestSomething1() {
      console.log('1.requestSomething1');
      getServerData().then(res => console.log('2.requestSomething1', res));
      console.log('3.requestSomething1');
    }
    //同步处理
    async function processServerData() {
      console.log(`1.父页面onBeforeMount, getServerData, 获取数据`)
      const res = await getServerData();
      console.log(`1.父页面onBeforeMount, getServerData, 获取数据成功`, res)
      serverData.value = res
      provide('ParentSelectedData', serverData)
      console.log(`1.父页面onBeforeMount, provide, 传递数据`, serverData.value)
    }

    onBeforeMount(() => {
      //processServerData()   
      getServerData().then(res => {
        console.log(`1.父页面onBeforeMount, getServerData, 获取数据成功`, res)
        serverData.value = res       
        console.log(`1.父页面onBeforeMount, provide, 传递数据`, serverData.value)
      })
    })
    provide('ParentSelectedData', serverData)

    // 选择审批人成功回调
    function getFlowData(returnData: any) {
      console.log('process/index.vue->选择审批人抄送人成功回调：', returnData)
      clientData.value = returnData
    }

    async function handleSaveForm() {
      if (clientData.value.aaList.length == 0) {
        createMessage.success({
          content: '请选择审批人',
          duration: 1,
        });
        return
      }

      const values = await validate();//表单数据
      values['aaList'] = clientData.value.aaList
      values['ccList'] = clientData.value.ccList
      console.log('表单数据：', values)

      createMessage.success({
        content: '保存成功',
        duration: 1,
      });
    }

    return {
      registerForm, getTitle, handleSaveForm, getFlowData, serverData,
    };
  },
});
</script>
